<template>
     <div class="flex">
        <span class="composite">
        <el-select
            class="composite_label"
            v-model="compositeValue"
            @change="change"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        </span>
        <!-- 筛选项 数字区间 -->
        <!-- <VabRangeForm v-if="selectRow.formType == 'vabRangeForm'" :ref="(el) => vabRangeFormRef = el"/> -->
        <!-- 时间 -->
        <el-date-picker
            v-if="selectRow.formType == 'time'"
            clearable
            placeholder="请选择"
            :type="selectRow.timeType"
            class="width_100 height_auto"
            v-model="selectValue"
        />
        <!-- 下拉筛选 -->
        <VabSelectForm 
            v-if="selectRow.formType == 'select'"
            v-model.trim="selectValue" 
            :multiple="selectRow.multiple ? selectRow.multiple : false"
            :options="selectRow.options" 
        />

         <!-- 输入框 -->
         <el-input 
            v-if="selectRow.formType == '11111'" 
            class="width_100" 
            v-model.trim="selectValue" 
            clearable
         />
    </div>
</template>

<script setup lang="ts">

/**
 * @props
 */

const props = defineProps({
    options: {
        type: Array,
        default: []
    } as any,
    defaultValue: {
        type: String,
        default: ''
    },
    defaultForm: {
        type: String,
        default: 'select'
    }
})

/**
 * @var
 */
const vabRangeFormRef = ref()
const compositeValue = ref<any>(props.defaultValue)
const selectRow = ref<any>(props.options.filter((item: any) => { return item.value == props.defaultValue }))
const selectValue = ref<any>('')

/**
 * @methods
 */
const change = (value: any) => {
    selectRow.value = props.options.filter((item: any) => { return item.value == value })
}

onMounted(() => {
    console.log(selectRow.value, 'selectRow.value------------>');

})
</script>

<style scoped lang="scss">
// 复合类查询样式
.composite {
    position: relative;

    :deep() {
        .el-select .el-input__inner {
            text-align: center;
        }
    }

    &::after {
        position: absolute;
        content: "";
        width: 28px;
        height: 30px;
        background-color: #f2f2f7;
        opacity: 0.6;
        border-left: 1px solid #E1E1E6;
        top: 1px;
        right: 6px;
        z-index: 0;
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        pointer-events: none
    }
}

.composite_label {
    width: 130px;
    margin-right: 5px;
}

.composite_form {
    :deep() {
        .el-form-item__label {
            justify-content: center;
            margin-right: 5px;
            padding: 0 20px 0 0;
        }
    }
}
</style>